import React from "react";
import {connect} from "dva";
import {withRouter} from "dva/router";
import PropTypes from "prop-types";
import {Layout} from "antd";
import {MyLayout} from "../components";
import style from "./index.css";
const {Content,Sider,Header} = Layout;
const App = ({children,app,location,dispatch})=>{
  const siderProps = {
    // user:app.user,
    menu:app.menu,
    location,
    toggle:app.toggle,
    itemClick:({ item, key, keyPath })=>{
      //Menu.Item被点击
      const selectItem = [];
      app.menu.map((itemMenu)=>{
        //查找更新导航面包屑
        if (itemMenu.id.toString()===item.props.openKeys[0]){
          selectItem.push({id:itemMenu.id,link:itemMenu.link,title:itemMenu.title,icon:itemMenu.icon});
          itemMenu.children.map((childrenItem)=>{
            if(childrenItem.id.toString()===key){
              selectItem.push(childrenItem);
            }
          })
        }
      });
      dispatch({type: 'app/navBread' , payload: selectItem});
    },
    getItemSelectd:()=>{
      //获取选中的菜单
      const resule = [];
      app.menu.map((itemMenu)=>{
        if(location.pathname===itemMenu.link){
          console.log('找到');
        }
        itemMenu.children.map((item)=>{
          if(item.link===location.pathname){
            resule.push({id:itemMenu.id,link:itemMenu.link,title:itemMenu.title,icon:itemMenu.icon})
            resule.push(item);
          }
        });
      });
      return resule;
    }
  };
  const headerProps = {
    menuToggle:()=>{
      dispatch({type:'app/menuToggle',payload:{toggle:!app.toggle}});
    },
    toggle:app.toggle
  };
  const navBreadProps = {
    navItem:app.navBread.length===0?siderProps.getItemSelectd():app.navBread,
  };
  return (
    <Layout className={style.layout}>
      <Sider collapsed={app.toggle}>
        <div className={style.logo}>
          Cpanel
        </div>
        <MyLayout.Sider {...siderProps} />
      </Sider>
      <Layout>
        <Header className={style.header}>
          <MyLayout.Header {...headerProps} />
        </Header>
        <MyLayout.NavBread {...navBreadProps} />
        <Content  className={style.content}>
          <main>
            {children}
          </main>
        </Content>
      </Layout>
    </Layout>
  )
};
App.protoTypes = {
  app:PropTypes.app,
};
export default withRouter(connect(({app})=>({app}))(App));
